<template>
  <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
</template>
<script>
  export default {
    name: 'Echarts',
    mounted(){

      /*前台对接后台的数据，先调用后台的接口*/
      // let _this=this
      axios.get('http://localhost:8181/fruit/barVO').then((res)=>{
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '水果销量统计',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#555555'
            }
          },
          tooltip: {},
          xAxis: {
            data: res.data.names
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: res.data.values
        }],
      });
    })



  }
  }
</script>

data: [
"苹果",
"香蕉",
"橘子",
"火龙果",
"葡萄",
"西瓜"
]

data: [
{
value: 333,
itemStyle: {
color: "#3fb1e3"
}
},
{
value: 133,
itemStyle: {
color: "#c4ebad"
}
},
{
value: 99,
itemStyle: {
color: "#c4ebad"
}
},
{
value: 222,
itemStyle: {
color: "#6be6c1"
}
},
{
value: 399,
itemStyle: {
color: "#3fb1e3"
}
},
{
value: 123,
itemStyle: {
color: "#c4ebad"
}
}
]
}]